/*
	创建人：伍超波
	创建时间：2017-9-13
	修改日期：2017-9-13
	修改人：伍超波
	个人邮箱：983916651@qq.com
	功能：原生js写swiper滑动效果
*/

var 
	oSlider = document.querySelector(".swiper"), //获取swiper
	oUl = oSlider.querySelector("ul"),
	aLi = oUl.querySelectorAll("li"), //获取所有li
	oBg = document.querySelector(".bg_pic img"), //背景层
	len = aLi.length; //获取li的个数
	oUl.style.width = len + "00%"; //初始化ul的宽度
//初始化,相当于oUl.style.transform = "translateX(0px) translateZ(0px)"
cssTransform(oUl,"translateX",0);
cssTransform(oUl,"translateZ",0);

/****
	触控事件
*/
//初始化触控对象
var 
	startPoint = null,
	translateX = 0,
	num = 0,
	sW = oSlider.offsetWidth,
	startX = 0,//保存当前的translateX
	startY = 0;
oSlider.addEventListener("touchstart", touch, false);
oSlider.addEventListener("touchmove", touch, false);
oSlider.addEventListener("touchend", touch, false);

//封装一个函数,分割二型的事件代理
function touch(event) {
	event = event || window.event;//兼容火狐
	//阻止默认行为
	event.preventDefault();
	//防止冒泡
	event.stopPropagation();
	switch(event.type) {
		case "touchstart":
			//保存手指按下时的对象
			startPoint = event.changedTouches[0];//存储对象
			oUl.style.transition = "";//因为初次触摸结束的时候添加了transition，如果不去掉则在整个touchmove阶段都会触发transition，造成卡顿
			startX = cssTransform(oUl, "translateX");
			break;
		case "touchmove":
			//保存手指按下时的对象
			var newPoint = event.changedTouches[0];//存储对象
			//计算移动量
			var diffx = newPoint.pageX - startPoint.pageX;
			//设置移动量
			translateX = startX + diffx;
			cssTransform(oUl, "translateX", translateX);
			break;
		case "touchend":
			//获取停止移动的时候 元素的translate的值
			var l = cssTransform(oUl, "translateX");
			l = Math.min(0,l);//左边墙
			l = Math.max(-sW*(len-1),l);//右边墙
			num = Math.round(-l/sW);//获取到跳转到哪个li
			autoPlay();
			break;
		default:
			break;
	}
}


/*
	渐变效果
*/
function autoPlay() {
	oUl.style.transition = ".5s";
	cssTransform(oUl, "translateX", -num*sW);
	oBg.src = aLi[num].children[0].src;
}

console.log(getComputedStyle(oUl,null)["transform"]);
//参数 obj attr val (节点 属性 值)，功能 动态改变节点的translate
function cssTransform(obj, attr, val) {
	if (!obj.transform) obj.transform = {};//初始化一个空的对象
	if (arguments.length === 3) { //判断传进几个参数
		//如果传进3个参数
		obj.transform[attr] = val;//设置对应的属性值
		var strVal = "";
		for(var keys in obj.transform) {
			strVal += `${keys}(${obj.transform[keys]}px) `;
		}
		obj.style.transform =strVal; 
	} else { //如果为两个参数，返回对应的值
		val = obj.transform[attr];
		if (typeof val === "undefined") {
			val = 0;//传入错误的如translateW
		}
		return val;
	}
}
